<!DOCTYPE HTML>
<html th:with="title='编辑用户'" >
<head th:include="fragments/header :: header">
</head>
<body id="app">
<div class="page-container">
	<form class="form form-horizontal" id="user-form">
		<input type="hidden" id="id" name="id" v-model="user.id" />
		<div class="row cl" v-show="user.loginName != 'admin'">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户类型：</label>
			<div class="formControls col-xs-7 col-sm-8">
			<select class="select size-S" id="type" name="type" v-model="user.type">
			<option value="1"  selected = "selected" >商户</option>
			</select>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>名称：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="text" v-model="user.name" class="input-text size-S" id="name" name="name" v-if="user.loginName != 'admin'">
				<input type="text" v-model="user.name" class="input-text size-S" id="name" name="name" v-if="user.loginName == 'admin'" readonly="readonly">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>登录名：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="text" v-model="user.loginName" class="input-text size-S" id="loginName" name="loginName" v-if="user.loginName != 'admin'">
				<input type="text" v-model="user.loginName" class="input-text size-S" id="loginName" name="loginName" v-if="user.loginName == 'admin'" readonly="readonly">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">外部商户编号：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="text" class="input-text size-S" v-model="user.outSn" id="outSn" name="outSn" v-if="user.loginName != 'admin'">
			</div>
		</div>			
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">邮箱：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="text" v-model="user.email" class="input-text size-S" id="email" name="email" v-if="user.loginName != 'admin'">
				<input type="text" v-model="user.email" class="input-text size-S" id="email" name="email" v-if="user.loginName == 'admin'" readonly="readonly">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">用户角色：</label>
			<div class="formControls col-xs-3 col-sm-3">
				<label>已分配角色(双击左右选择)</label>
				<span class="select-box">
					<select class="select size-S" id="userGroupIds" name="userGroupIds" multiple="multiple" size="6">
					</select>
				</span>
				<label>按住ctrl键，单击选择多项</label>
			</div> 		
			<div class="formControls col-xs-1 col-sm-1" style="height:100%;">
			   <label>&nbsp;</label>
		       <label class="form-label"><input title="全部移动到右边" class="btn btn-default btn-block size-S radius" type="button"  id="userGroupIds_rightAll" value=">>"/></label>
		       <label class="form-label"><input title="选中的移动到右边" class="btn btn-default btn-block size-S radius" type="button"  id="userGroupIds_rightSelected" value=">"/></label>
		       <label class="form-label"><input title="选中的移动到左边" class="btn btn-default btn-block size-S radius" type="button"  id="userGroupIds_leftSelected" value="<"/></label>
		       <label class="form-label"><input title="全部移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_leftAll" value="<<"/></label>
			</div>					
			<div class="formControls col-xs-3 col-sm-4">
				<label>待分配角色(双击左右选择)</label>
				<span class="select-box">
					<select class="select size-S" id="userGroupIds_to" multiple="multiple" size="6">
						<option th:each="group:${groups}" th:value="${group.id}" th:text="${group.name}"></option>											
					</select>
				</span>
				<label>按住ctrl键，单击选择多项</label>
			</div> 		
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">模板类型：</label>
			<div class="formControls col-xs-3 col-sm-3">
				<label>已分配模板类型(双击左右选择)</label>
				<span class="select-box">
					<select class="select size-S" id="userTemplateTypeIds" name="userTemplateTypeIds" multiple="multiple" size="6">
					</select>
				</span>
				<label>按住ctrl键，单击选择多项</label>
			</div>
			<div class="formControls col-xs-1 col-sm-1" style="height:100%;">
				<label>&nbsp;</label>
				<label class="form-label"><input title="全部移动到右边" class="btn btn-default btn-block size-S radius" type="button"  id="userTemplateTypeIds_rightAll" value=">>"/></label>
				<label class="form-label"><input title="选中的移动到右边" class="btn btn-default btn-block size-S radius" type="button"  id="userTemplateTypeIds_rightSelected" value=">"/></label>
				<label class="form-label"><input title="选中的移动到左边" class="btn btn-default btn-block size-S radius" type="button"  id="userTemplateTypeIds_leftSelected" value="<"/></label>
				<label class="form-label"><input title="全部移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userTemplateTypeIds_leftAll" value="<<"/></label>
			</div>
			<div class="formControls col-xs-3 col-sm-4">
				<label>待分配模板类型(双击左右选择)</label>
				<span class="select-box">
					<select class="select size-S" id="userTemplateTypeIds_to" multiple="multiple" size="6">
						<option th:each="templateType:${templateTypes}" th:value="${templateType.id}" th:text="${templateType.templateTypeName}"></option>
					</select>
				</span>
				<label>按住ctrl键，单击选择多项</label>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary size-L radius" type="submit" value="提交">
				<input class="btn btn-primary size-L radius" type="button" onclick="closeWin()" value="关闭">
			</div>
		</div>
	</form>
</div>
<script type="text/javascript">
function closeWin() {
	var index = parent.layer.getFrameIndex(window.name);
	parent.layer.close(index);
}
function resetForm() {
	$('#user-form')[0].reset();
}
$(function(){	
	$('#userGroupIds').multiselect({submitAllLeft: false, submitAllRight: false});
	$('#userTemplateTypeIds').multiselect({submitAllLeft: false, submitAllRight: false});
	$("#user-form").validate({
		rules:{
			name:{
				required:true,
				minlength:2,
				maxlength:16
			},
			loginName:{
				required:true,
				minlength:2,
				maxlength:16
			},
			password:{
				required:true,
				minlength:2,
				maxlength:16
			}
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			var data = $('#user-form').serialize();

			var selectedGroups = $("#userGroupIds").find("option");
			for(var j = 0; j < selectedGroups.length; j++) {
				data += "&userGroups["+j+"]=" + $(selectedGroups[j]).prop("value");
			}
			var selectedTemplateTypes = $("#userTemplateTypeIds").find("option");
			for(var j = 0; j < selectedTemplateTypes.length; j++) {
				data += "&userTemplateTypes["+j+"]=" + $(selectedTemplateTypes[j]).prop("value");
			}

			console.log("data======"+JSON.stringify(data));
			
			//var shopCodes = $("#shopCode").find("option");
			//for(var j = 0; j < shopCodes.length; j++) {
			//	data += "&dataPermission[" + j + "]=" + $(shopCodes[j]).prop("value");
			//}
			$.ajax({
			    type: "POST",
			    url: '/security/user/update',
			    data: data,
			    beforeSend: function () {
			    	
			    },
			    complete: function () {
			    	
			    },
			    error: function(request) {
			    	layer.alert("系统出错");
			    },
			    success: function(data) {
			    	if (data.status == 0) {
			    		refreshUParentList();
						layer.alert(data.message, function() {
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
						});
					}else{
						layer.alert(data.message);
					}
			    }
			});
		}
	});
});
var app = new Vue({
	  el: '#app',
	  data: {
		  user: {},
		  roles: []
	  },
	  methods:{
	        push:function(){
	            this.nextTick(function(){
	            	layer.alert('数据已经更新')
	            });
	            this.$nextTick(function(){
	            	layer.alert('v-for渲染已经完成')
	            })
	        }
	    }
	});

function getIdFromUrl() {
	var addr = location.href;
	var index = addr.lastIndexOf('/') + 1;
	var id = addr.substr(index);
	return id;
}

function getUser() {
	var id = getIdFromUrl();
	$.ajax({
	    type: "GET",
	    url: '/security/user/get/'+id,
	    beforeSend: function () {
	    },
	    complete: function () {
	    },
	    error: function(request) {
	        alert("Connection error");
	    },
	    success: function(result) {
	        if (result.status == 0) {
	        	var data = result.data;
	        	app.user = data;
	        	/*
	        	for(var i = 0; i < data.roles.length; i++) {
	        		$(":checkbox[name=roles][value="+data.roles[i].id+"]").prop("checked", true);
	        	}
	        	*/
	        	//alert(data.userIds);
	        	for(var i = 0; i < data.userGroups.length; i++) {
	        		$("#userGroupIds_to").find("option[value='" + data.userGroups[i] + "']").appendTo($("#userGroupIds"));
	        	}
				for(var i = 0; i < data.userTemplateTypes.length; i++) {
					$("#userTemplateTypeIds_to").find("option[value='" + data.userTemplateTypes[i] + "']").appendTo($("#userTemplateTypeIds"));
				}

				if(data.dataPermissionStr != "") {
	        		var dataPermissions = data.dataPermissionStr.split(",");
	        		var optHtml = "";
	        		for(var i = 0; i < dataPermissions.length; i++) {
	        			optHtml += "<option value='"+dataPermissions[i]+"'>"+dataPermissions[i]+"</option>";
	        		}
	        		$("#shopCode").html(optHtml);
	        	}
	        	
	        }
	    }
	});
}

$(function() {
	getUser();
});
</script> 
</body>
</html>